<template>
    <div class="BIGBOX">
        <el-container>
            <el-aside :width="new_width" >
                <div>{{isBart ? '管理' : '管理系统' }}</div>
                <div>
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        :collapse="isBart" :style="{border:'none'}">

                        <el-menu-item index="2" @click="ck2"
                            :style="{ color: $store.state.newpath == '/app1' ? 'gold' : 'white' }">
                            <i class="el-icon-menu"
                                :style="{ color: $store.state.newpath == '/app1' ? 'gold' : 'white' }"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="ck1('/shop', '商品管理')"
                            :style="{ color: $store.state.newpath == '/shop' ? 'gold' : 'white' }">
                            <i class="el-icon-document"
                                :style="{ color: $store.state.newpath == '/shop' ? 'gold' : 'white' }"></i>
                            <span slot="title">商品管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="ck1('/user', '用户列表')"
                            :style="{ color: $store.state.newpath == '/user' ? 'gold' : 'white' }">
                            <i class="el-icon-setting"
                                :style="{ color: $store.state.newpath == '/user' ? 'gold' : 'white' }"></i>
                            <span slot="title">用户列表</span>
                        </el-menu-item>
                        <el-menu-item index="1-1" @click="ck1('/page1', '个人中心')"
                            :style="{ color: $store.state.newpath == '/page1' ? 'gold' : 'white' }">
                            <i class="el-icon-loading"
                                :style="{ color: $store.state.newpath == '/page1' ? 'gold' : 'white' }"></i>
                            <span slot="title">个人中心</span>
                        </el-menu-item>
                        <el-menu-item index="1-2" @click="ck1('/page2', '页面')"
                            :style="{ color: $store.state.newpath == '/page2' ? 'gold' : 'white' }">
                            <i class="el-icon-loading"
                                :style="{ color: $store.state.newpath == '/page2' ? 'gold' : 'white' }"></i>
                            <span slot="title">页面</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-breadcrumb separator="|">
                        <div class="hezi" @click="ck">
                            <i class="el-icon-menu"></i>
                        </div>
                        <el-breadcrumb-item @click.native="ck3('/app1')" class="breadcrumb">
                            首页</el-breadcrumb-item>
                        <div class="breadcrumb1">
                            <el-breadcrumb-item @click.native="ck3(item.address)" v-for="(item, index) in tags" :key="index">
                            {{ item.name }}
                        </el-breadcrumb-item>
                        </div>
                        <div class="touxiang">
                            <img src="../assets/OIP-C (1).jpg" alt="">
                        </div>
                    </el-breadcrumb>
                </el-header>
                <el-main>
                    <div class="shouye">
                        <el-tag @click="ck2"
                            :style="{ backgroundColor: $store.state.newpath == '/app1' ? 'skyblue' : 'white' }">首页</el-tag>
                        <el-tag v-for="tag, index in tags" :key="tag.name" closable :address="tag.address"
                            @close="handleClose(tag, index)" @click="ck3(tag.address)"
                            :style="{ backgroundColor: $store.state.newpath == tag.address ? 'skyblue' : 'white' }">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                    <br>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // arr: [],
            tags: [],
            new_width: '140px',
            // inputVisible: false,
            // inputValue: '',
            isBart: false
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        ck() {
           
            this.isBart=!this.isBart
            this.isBart ? this.new_width = "65px" : this.new_width = '140px'

        },
        ck1(val, val2) {
            this.$store.commit('changeNewpath', val)
            // let apper = 0
            let apper2 = 0
            // for (let index = 0; index < this.arr.length; index++) {
            //     if (this.arr[index].address == val) {
            //         apper++
            //     }
            // }
            for (let index = 0; index < this.tags.length; index++) {
                if (this.tags[index].address == val) {
                    apper2++
                }
            }
            // if (apper == 0) {
            //     this.arr.push({ name: val2, address: val })
            // }
            if (apper2 == 0) {
                this.tags.push({ name: val2, address: val })
            }
            this.$router.push(val)
        },
        ck2() {
            this.$router.push('/add')
            this.$store.commit('changeNewpath', '/app1')
        },
        ck3(val) {
            this.$router.push(val)
            this.$store.commit('changeNewpath', val)
        },
        handleClose(tag, index) {
            const item = this.tags.indexOf(tag)
            if (this.tags.length > 1 && index == 0) {
                this.$router.push(this.tags[index + 1].address)
                this.$store.commit('changeNewpath', this.tags[index + 1].address)
            } else if (this.tags.length != 0 && index > 0) {
                this.$router.push(this.tags[index - 1].address)
                this.$store.commit('changeNewpath', this.tags[index - 1].address)
            } else {
                this.$router.push("/app1")
                this.$store.commit('changeNewpath', '/app1')
            }
            this.tags.splice(item, 1)
        }
    },
    mounted() {
        this.$router.push({ name: 'add' })
        this.$store.commit('changeNewpath', '/app1')
    }
}
</script>

<style lang="less" scoped>
.touxiang {
    position: absolute;
    left: 1200px;
    top: 8px;
    // outline: 1px solid red;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.touxiang>img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.shouye {
    text-align: left;
}

.hezi {
    margin-top: 20px;
    width: 35px;
    height: 20px;
    background-color: #fff;
    // outline: 1px solid red;
}

.breadcrumb {
    margin-left: 50px;
    margin-top: -18px;
}

.breadcrumb1 {
   display: flex;
   margin-left: 100px;
   margin-top: -18px;
}

.el-breadcrumb {
    margin-left: -10px;
    // outline: 1px solid red;

    .hezi>i {
        margin-top: 3px;
    }
}

.el-menu,
.el-menu-item,
.el-submenu,
.el-menu-item-group,
template {
    background-color: #737e8b;
    // color: #77e788;
}

.el-menu-item,
.el-submenu {
    text-align: left;
}

.el-menu-item:hover {
    background-color: #333333d3;
}

.el-header {
    background-color: #9cabbb;
    color: #333;
    text-align: center;
}

.el-aside {
    transition: all .25s;
    background-color: #737e8b;
    color: #333;
    text-align: center;
    // line-height: 35px;
    height: calc(100vh);

}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    height: calc(100vh - 60px);
    text-align: center;
    // outline: 1px solid black;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}</style>